/*
 * @LastEditors: 七七
 * @Date: 2023-01-08 15:21:28
 */

// 引入Count的UI组件
import CountUI from '../../components/Count/Count.jsx';
// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux';
import { creteIncrementAction, creteDecrementAction, creteIncrementAsyncAction } from '../../redux/count_action'


// mapStateToProps函数返回的是一个对象：
// 返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
// mapStateToProps用于传递状态
function mapStateToProps(state) {
  // console.log('@count：', state);
  return { count: state };
}

// mapDispatchToProps函数返回的是一个对象：
// 返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
// mapStateToProps用于操作状态的方法
function mapDispatchToProps(dispatch) {
  return {
    increment: number => dispatch(creteIncrementAction(number)),
    decrement: number => dispatch(creteDecrementAction(number)),
    incrementAsync: (number, time) => dispatch(creteIncrementAsyncAction(number, time)),
  }
}

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);

